<script setup lang="js">

import {ref} from "vue";
import LcuProfile from "@share/components/lcu/LcuProfile.vue";
import LcuSummonerName from "@share/components/lcu/LcuSummonerName.vue";
import CareerHiddenDisplay from "@share/components/lcu/CareerHiddenDisplay.vue";
import {ElMessage} from "element-plus";
import PersonPage from "@/renderer/main-window/components/PersonPage.vue";

const summonerNameSearch = ref();

const otherSummonerList = ref([]);

const summoners = ref([])
const searchSummonerInfoFunc = () => {
  if (!summonerNameSearch.value || !summonerNameSearch.value.includes('#')) {
    ElMessage.warning({
      message: '请输入召唤师编号后再查询',
      duration: 350,
    });
    return;
  }
  const queryParse = summonerNameSearch.value.toString().split('#');
  const gameName = queryParse[0];
  const tagLine = queryParse[1];
  searchedSummonerIsLoading.value = true;
  window.api.summoner.getSummonerInfoByName({gameName, tagLine}).then(res => {
    summoners.value = res.data;
    searchedSummonerIsLoading.value = false;
  }).catch(err => {
    searchedSummonerIsLoading.value = false;
  })
}

const handleDeleteTag = (puuid) => {
  const newTabs = otherSummonerList.value.filter(item => {
    return item.value !== puuid;
  })
  otherSummonerList.value = [...newTabs];
  currentTab.value = '战绩查询';

}

const addNewTabs = ({puuid}) => {

  const filterList = otherSummonerList.value.filter(item => {
    return item.value === puuid;
  });
  if (filterList.length > 0) {
    currentTab.value = filterList[0].label;
    return;
  }


  window.api.summoner.getSummonerInfoByPuuid(puuid)
      .then(res => {
        return Promise.resolve(res.data)
      })
      .then(summonerInfoTemp => {
        window.api.summoner.getSummonerProfileByPuuid(puuid).then(res => {
          const label = `${summonerInfoTemp.gameName}#${summonerInfoTemp.tagLine}`;
          otherSummonerList.value.push({
            'label': label,
            'value': summonerInfoTemp?.puuid,
            "summonerInfo": summonerInfoTemp,
            "summonerProfileInfo": res.data,
          })
          currentTab.value = summonerInfoTemp.puuid;
        })
      })
}

const searchedSummonerIsLoading = ref(false);
const cardMaxWidth = ref(500)
const currentTab = ref('战绩查询');

</script>


<template>

  <el-tabs @tab-remove="handleDeleteTag" v-model="currentTab">
    <el-tab-pane label="战绩查询" name="战绩查询">
      <div style="padding-top:120px">
        <el-input
            @keyup.enter="searchSummonerInfoFunc"
            :maxlength="36"
            v-model="summonerNameSearch"
            class="search_summoner_name_input"
            style="width: 360px;position: sticky;top: 10px;left: calc(50% - 180px)"
            placeholder="召唤师名称#编号">
          <template #suffix>
            <el-button type="primary" @click="searchSummonerInfoFunc">搜索</el-button>
          </template>
        </el-input>
        <el-divider/>
        <div
            v-loading="searchedSummonerIsLoading"
            style="margin:0 auto"
            :style="{
      'min-width':`${cardMaxWidth+100}px`,
      'max-width':`${cardMaxWidth+200}px`
    }"
        >
          <el-card
              @click="addNewTabs({puuid:item?.puuid})"
              v-for="item in summoners"
              shadow="hover"
              class="summoner-overview">
            <LcuProfile :profile-id="item?.profileIconId"/>
            <LcuSummonerName :name="item.gameName" :num="item.tagLine" :copy-name-to-clip-board="false"/>
            <el-text>{{ item.summonerLevel }}级</el-text>
            <CareerHiddenDisplay :hidden-code="item.privacy"/>
          </el-card>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane
        v-for="su in otherSummonerList"
        closable
        :label="su.label"
        :name="su.value"
        :key="su.value"
    >

      <PersonPage
          @jumpSummonerHomePage="addNewTabs"
          :summonerInfo="su.summonerInfo"
          :summonerProfileInfo="su.summonerProfileInfo"
      ></PersonPage>
    </el-tab-pane>
  </el-tabs>


</template>

<style scoped lang="scss">
.summoner-overview {
  margin: 6px 0;

  :deep(.el-card__body) {
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.search_summoner_name_input {
  :deep(.el-input__wrapper) {
    padding: 0 0 0 6px
  }
}

</style>